import router from './router'
import store from '@/store'
// 导入进度条插件
import NProgress from 'nprogress'
// 导入进度条样式
import 'nprogress/nprogress.css'
import getPageTitle from '@/utils/get-page-title'

const whiteList = ['/login', '/404'] // no redirect whitelist

// 基础的权限拦截
// 1. 登录状态下, 不能手动切换到/login页面, 如果切换强制回到/首页
// 2. 未登录状态下, 只能去/login页面(白名单), 其他页面你不能跳转

// 全局前置守卫(只要路由发生跳转就先执行这里, 在跳转页面之前)
// 知识点: 刷新网页会让路由守卫再走一次
router.beforeEach(async(to, from, next) => {
  NProgress.start() // 开始进度条
  const token = store.getters.token

  if (token) { // 登录
    if (to.path === '/login') { // 登录状态, 要去登录页
      next('/')
      NProgress.done() // 重定向, 就会导致上一次路由终端, 启动的进度条需要手动关闭,
      // 重定向会导致路由守卫再次执行, 再次开启一个进度条, 跳转后关闭
    } else {
      // 如果没有用户名字, 先请求等待成功后, 我们放行页面next()
      // 如果有名字了if进不去, 也要走next()放行页面
      // 如果没有名字再请求, 有名字就不用请求了(vuex有值), 不写判断就每次都请求浪费流量

      // 为何要加await?
      // await 等待: 等待后面用户信息保存到vuex, 再next()跳转页面, 就能直接看到用户名
      // 如果不加, 异步去请求, 主线程代码先往下next()跳转页面, 页面上没有名字, 异步请求数据完成vuex值变量化
      // 响应式更新所有使用vuex相关的变量 -> 从没有名字->有名字显示
      next()
      if (!store.getters.name) {
        store.dispatch('user/getUserInfoActions')
      }
    }
  } else { // 未登录
    // 可以写并列的判断, 但是麻烦, 不如弄个数组(所谓白名单, 判断)
    if (whiteList.includes(to.path)) { // 未登录->去白名单页面->放行
      next()
    } else {
      next('/login')
      NProgress.done()
    }
  }
}) // 注意: 因为右上角主动退出还没有写, 所以现在只能清除token刷新方式退出

router.afterEach((to, from) => {
  NProgress.done() // 进度条关闭

  // 网页切换完毕, 再设置当前切换完毕的这个页面的标题
  // console.log(to) // 运行时的路由对象信息, 包含路由规则数组里的对象
  document.title = getPageTitle(to.meta.title)
})
